import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import homeIndex from '@/assets/vite.svg'

// 路由规则
const rootRouteList: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home/index.vue'),
    meta: {
      title: '首页', // 页面标题
      img: homeIndex, // 页面logo
      name: '数据展示', // 页面描述
      keepAlive: false, // 是否缓存
    },
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/about/index.vue'),
    meta: {
      title: '关于',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('@/views/list/index.vue'),
    meta: {
      title: '列表',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/detail',
    name: 'detail',
    component: () => import('@/views/detail/index.vue'),
    meta: {
      title: '编辑',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/video',
    name: 'video',
    component: () => import('@/views/video/index.vue'),
    meta: {
      title: '视频',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/iconfont',
    name: 'iconfont',
    component: () => import('@/views/iconfont/index.vue'),
    meta: {
      title: '字体icon',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/realTime',
    name: 'realTime',
    component: () => import('@/views/realTime/index.vue'),
    meta: {
      title: '实时时间',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/htmlTocanvas',
    name: 'htmlTocanvas',
    component: () => import('@/views/htmlTocanvas/index.vue'),
    meta: {
      title: '生成canvas图片并上传保存',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/lodash',
    name: 'lodash',
    component: () => import('@/views/lodash/index.vue'),
    meta: {
      title: '节流防抖',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/echarts',
    name: 'echarts',
    component: () => import('@/views/echarts/index.vue'),
    meta: {
      title: 'Echarts',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/dragDialog',
    name: 'dragDialog',
    component: () => import('@/views/dragDialog/index.vue'),
    meta: {
      title: 'dragDialog',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/pinia',
    name: 'pinia',
    component: () => import('@/views/pinia/index.vue'),
    meta: {
      title: 'pinia',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/table',
    name: 'table',
    component: () => import('@/views/table/index.vue'),
    meta: {
      title: 'table',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/map',
    name: 'map',
    component: () => import('@/views/map/index.vue'),
    meta: {
      title: 'map',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/upload',
    name: 'upload',
    component: () => import('@/views/upload/index.vue'),
    meta: {
      title: 'upload',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/leaflet',
    name: 'leaflet',
    component: () => import('@/views/leaflet/index.vue'),
    meta: {
      title: 'leaflet',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/drawer',
    name: 'drawer',
    component: () => import('@/views/drawer/index.vue'),
    meta: {
      title: 'drawer',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/roll',
    name: 'roll',
    component: () => import('@/views/roll/index.vue'),
    meta: {
      title: 'roll',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/tsparticles',
    name: 'tsparticles',
    component: () => import('@/views/tsparticles/index.vue'),
    meta: {
      title: 'tsparticles',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/camera',
    name: 'camera',
    component: () => import('@/views/camera/index.vue'),
    meta: {
      title: 'camera',
      name: '数据展示',
      keepAlive: false,
    },
  },
  {
    path: '/cropperjs',
    name: 'cropperjs',
    component: () => import('@/views/cropperjs/index.vue'),
    meta: {
      title: 'cropperjs',
      name: '数据展示',
      keepAlive: false,
    },
  },
]

// 创建路由对象
const router = createRouter({
  history: createWebHistory(),
  routes: rootRouteList,
  // 滚动行为，to目标路由，form源路由，savedPosition后退按钮表示之前保存的桂东位置
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // 返回之前保存的位置
      return savedPosition
    } else {
      // 平滑滚动到顶部
      return { top: 0, behavior: 'smooth' }
    }
  },
})

export default router // 路由导出后续路由守卫使用
